import React from "react";
import affixStyle from "./affix.module.css"
import { delTaskExerciseItem, setTaskExerciseList,emptyTaskExerciseItem} from "../../actions";
import {connect} from "react-redux";
import {GlobalEventEmitter} from "../../common/event";

function Affix(props) {

    const {taskExerciseList, delTaskExerciseItem, emptyTaskExerciseItem} = props;

    const handleDel = item => {
        console.log('click ----',item)
        delTaskExerciseItem(item.id)
        GlobalEventEmitter.emit('taskChange')
    }
    return (<div className={affixStyle.affixContainer}>
        <div className={affixStyle.affixHeader}>
            <strong>购物车</strong>
            <button type="button" className="btn btn-info">展开与收起</button>
            <button type="button" className="btn btn-danger" onClick={ () => { emptyTaskExerciseItem() }}>清空</button>

        </div>
        <div className={affixStyle.affixContent}>
            <ul>
                {
                    taskExerciseList.map(item => {
                        return <li key={item.id}>
                            <span>{item.content}</span>
                            <button type="button" className="btn btn-danger btn-sm" onClick={() => { handleDel(item) }}>删除
                            </button>
                        </li>
                    })
                }
            </ul>
        </div>
        <div className={affixStyle.affixFooter}>
            <strong>购物车</strong>
            <button type="button" className="btn btn-primary">提交</button>

        </div>
    </div>)
}

function mapStateToProps(state) {
    return {
        taskExerciseList: state.exercise
    }
}

function mapDispatchToProps(dispatch) {
    return {
        setTaskExerciseList: (list) => dispatch(setTaskExerciseList(list)),
        emptyTaskExerciseItem: () => dispatch(emptyTaskExerciseItem()),
        delTaskExerciseItem: id => dispatch(delTaskExerciseItem(id))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Affix);
